// Copyright Up and Running

$(document).ready(function ($) {

    var window_width = $(window).width() / 2,
        animation_end = true,
        front_anima_speed = 150;

    // attach handlers for resizing and scrolling events
    $(window).resize(resize_handler);
    $(window).scroll(scroll_handler);

    // handler for mouse move, where all three objects are moving independently
    // to create effect like they have different depths in space
    $('#front').mouseenter(function (e) {
        animation_end = false;
        var x = -(e.pageX - window_width) / 30;
        var active = $('.cycle-slide-active');
        active.find('table.left').stop(true, false).animate({'marginLeft': x / 2 + 'px'}, front_anima_speed);
        active.find('table.middle').stop(true, false).animate({'marginLeft': x + 'px'}, front_anima_speed);
        active.find('table.right').stop(true, false).animate({'marginLeft': x / 2 + 'px'}, front_anima_speed, function () {
            animation_end = true;
        });
    }).mousemove(function (e) {
            if (animation_end) {
                var x = -(e.pageX - window_width) / 30;
                var active = $('.cycle-slide-active');
                active.find('table.left').css('marginLeft', x / 2 + 'px');
                active.find('table.middle').css('marginLeft', x + 'px');
                active.find('table.right').css('marginLeft', x / 2 + 'px');
            }
            // on mouseleave positions of them will be reset to defaults
        }).mouseleave(function () {
            var active = $('.cycle-slideshow');
            active.find('table.left').stop(true, false).animate({'marginLeft': 0}, front_anima_speed);
            active.find('table.middle').stop(true, false).animate({'marginLeft': 0}, front_anima_speed);
            active.find('table.right').stop(true, false).animate({'marginLeft': 0}, front_anima_speed);
        });
});

// on page scroll objects will move up and down, with a different speed for the parallax effect
function scroll_handler() {
    current_scroll = $(window).scrollTop();

    if (parallax && current_scroll > 0 && current_scroll < 1000) {
        front_pos_bottom = parseInt(current_scroll / 20);
        front_img_front.css('bottom', front_pos_bottom + 'px');
        front_pos_bottom = parseInt(current_scroll / 10);

        front_pos_bottom = parseInt(current_scroll / 3);
        front_closer.css('bottom', (front_pos_bottom) + 'px');

        front_pos_bottom = parseInt(current_scroll / 4);
        front_pager.css({'opacity': 1 - current_scroll / 700, 'bottom': front_pos_bottom});
    }
}

// on window resize, position of the objects will be recalculated 
// so they are always entirely visible and with appropriate distance between them
function resize_handler() {

    var slide = front.find('.cycle-slide');

    if (parallax && $(window).width() < 900) {
        parallax = false;
        $('body').removeClass('parallax');
    }
    else if (!parallax && $(window).width() >= 900) {
        parallax = true;
        $('body').addClass('parallax');
    }

    slide.not('.cycle-sentinel').find('table img').each(function (index) {

        if (init) {
            img_padding[index] = new Object();
            img_padding[index].left = parseInt($(this).css('paddingLeft').replace('px', ''));
            img_padding[index].right = parseInt($(this).css('paddingRight').replace('px', ''));
        }

        $(this).removeAttr('style').width(((100 * $(this).width()) / PAGE_WIDTH) + '%');
        if (img_padding[index].left > 0) {
            $(this).css('paddingLeft', ((100 * img_padding[index].left) / PAGE_WIDTH) + '%');
        }
        if (img_padding[index].right > 0) {
            $(this).css('paddingRight', ((100 * img_padding[index].right) / PAGE_WIDTH) + '%');
        }
    });
}